<template>
	<view>
		<swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tabChange="changeTab"></swiper-tab-head>
		<!-- uni-tab-bar解决部分数据不匹配问题 -->
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :current="tabIndex" :style="{height: swiperHeight+'px'}" @change="tabChange">
				<block v-for="(tab,index) in newList" :key="index">
					<swiper-item>
						<scroll-view class="list" scroll-y="true" @scrolltolower="loadMore(index)">
							<template v-if="tab.list.length>0">
								<block v-for="(item,index1) in tab.list" :key="index1">
									<index-list :item="item" :index="index1"></index-list>
								</block>
								<!-- 上拉加载更多的组件 -->
								<load-more :loadText="tab.loadText"></load-more>
							</template>
							<template v-else>
								<!-- 封装无数据的组件 -->
								<nothing></nothing>
							</template>
						</scroll-view>
					</swiper-item>
				</block>
			</swiper>
		</view>
	</view>
</template>

<script>
	//1.导入组件
	import indexList from '../../components/index/index-list.vue'
	import swiperTabHead from '../../components/index/swiper-tab-head.vue'
	import loadMore from '../../components/common/load-more.vue'
	import nothing from '../../components/common/nothing.vue'

	export default {
		components: {
			indexList, //2.声明组件
			swiperTabHead,
			loadMore,
			nothing
		},
		data() {
			return {
				//设置swiper的高度
				swiperHeight: 1000,
				//选项卡中的数据
				newList: [{
					loadText: "上拉加载更多...",
					list: [
						//图文数据
						{
							userPic: "../../static/demo/userpic/6.jpg", //用户头像
							nikname: "颜芬", //用户昵称
							isFollow: false, //是否关注
							title: "小颜小颜，为你带盐", //标题
							type: "img", //img图文,video视频
							titlePic: "../../static/demo/datapic/1.jpg", //封页图
							infoNum: { //当前内容的点赞数，踩数，以及操作
								index: 0, //0 未操作 1 表示赞 2 表示踩
								topNum: 22, //顶
								lowNum: 12 //踩
							},
							commentNum: 11, //评论数据
							shareNum: 2 //转发的数据
						},
						//视频数据
						{
							userPic: "../../static/demo/userpic/9.jpg", //用户头像
							nikname: "琪哥", //用户昵称
							isFollow: false, //是否关注
							title: "琪哥🐂牛牛牛", //标题
							type: "video", //img图文,video视频
							playNum: "21w", //服务端计算,
							long: "3:59",
							titlePic: "../../static/demo/datapic/2.jpg", //封页图
							infoNum: { //当前内容的点赞数，踩数，以及操作
								index: 1, //0 未操作 1 表示赞 2 表示踩
								topNum: 11, //顶
								lowNum: 12 //踩
							},
							commentNum: 1, //评论数据
							shareNum: 2 //转发的数据
						},
						//视频数据
						{
							userPic: "../../static/demo/userpic/2.jpg", //用户头像
							nikname: "雅萍", //用户昵称
							isFollow: false, //是否关注
							title: "雅萍YYDS", //标题
							type: "video", //img图文,video视频
							playNum: "21w", //服务端计算,
							long: "3:59",
							titlePic: "../../static/demo/datapic/3.jpg", //封页图
							infoNum: { //当前内容的点赞数，踩数，以及操作
								index: 2, //0 未操作 1 表示赞 2 表示踩
								topNum: 11, //顶
								lowNum: 12 //踩
							},
							commentNum: 1, //评论数据
							shareNum: 2 //转发的数据
						},
						{
							userPic: "../../static/demo/userpic/12.jpg", //用户头像
							nikname: "紫寒", //用户昵称
							isFollow: false, //是否关注
							title: "xxx", //标题
							type: "img", //img图文,video视频
							titlePic: "../../static/demo/datapic/5.jpg", //封页图
							infoNum: { //当前内容的点赞数，踩数，以及操作
								index: 0, //0 未操作 1 表示赞 2 表示踩
								topNum: 11, //顶
								lowNum: 12 //踩
							},
							commentNum: 1, //评论数据
							shareNum: 2 //转发的数据
						},
						//视频数据
						{
							userPic: "../../static/demo/userpic/14.jpg", //用户头像
							nikname: "刘小狗", //用户昵称
							isFollow: false, //是否关注
							title: "我是小狗", //标题
							type: "video", //img图文,video视频
							playNum: "101w", //服务端计算,
							long: "1:59",
							titlePic: "../../static/demo/datapic/14.jpg", //封页图
							infoNum: { //当前内容的点赞数，踩数，以及操作
								index: 2, //0 未操作 1 表示赞 2 表示踩
								topNum: 111, //顶
								lowNum: 12 //踩
							},
							commentNum: 1, //评论数据
							shareNum: 2 //转发的数据
						}
					] //关注
				}, {
					loadText: "上拉加载更多...",
					list: []
				}, {
					loadText: "上拉加载更多...",
					list: [] //体育
				}, {
					loadText: "上拉加载更多...",
					list: [] //热点
				}, {
					loadText: "上拉加载更多...",
					list: [] //财经
				}, {
					loadText: "上拉加载更多...",
					list: [] //娱乐
				}, {
					loadText: "上拉加载更多...",
					list: [] //本地
				}],

				tabIndex: 0, //默认的选项
				tabBars: [{
					name: '关注',
					id: 'guanzhu'
				}, {
					name: '推荐',
					id: 'tuijian'
				}, {
					name: '体育',
					id: 'tiyu'
				}, {
					name: '热点',
					id: 'redian'
				}, {
					name: '财经',
					id: 'caijing'
				}, {
					name: '娱乐',
					id: 'yule'
				}, {
					name: '本地',
					id: 'bendi'
				}]
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: function(res) {
					let height = res.windowHeight;
					this.swiperHeight = height;
				}
			});

		},
		//监听原生的输入框点击事件
		onNavigationBarSearchInputClicked() {
			console.log("输入框被点击");
			//在起始页面跳转到搜索页并且传递参数
			uni.navigateTo({
				url:"../search/search"
			})
		},
		onNavigationBarButtonTap(e) {
			console.log(e);
			if(e.index==1){
				uni.navigateTo({
					url:'../add-input/add-input'
				})
			}
		},
		methods: {
			//滑块修改
			tabChange(event) {
				console.log(event.detail);
				this.tabIndex = event.detail.current;
			},
			//头部标签修改 
			changeTab(index) {
				this.tabIndex = index;
			},
			loadMore(index) {
				if (this.newList[index].loadText != "上拉加载更多...") {
					return;
				}
				this.newList[index].loadText = "加载中...";
				//模拟加载数据
				setTimeout(() => {
					//1.向后台获得数据
					console.log("setTimeout执行...");
					let newData = {
						userPic: "../../static/demo/userpic/13.jpg", //用户头像
						nikname: "谭璇", //用户昵称
						isFollow: false, //是否关注
						title: "小谭！峡谷法王！", //标题
						type: "img", //img图文,video视频
						titlePic: "../../static/demo/datapic/13.jpg", //封页图
						infoNum: { //当前内容的点赞数，踩数，以及操作
							index: 0, //0 未操作 1 表示赞 2 表示踩
							topNum: 16, //顶
							lowNum: 6 //踩
						},
						commentNum: 6, //评论数据
						shareNum: 2 //转发的数据
					};
					this.newList[index].list.push(newData);

					this.newList[index].loadText = "上拉加载更多..."
				}, 2000);
				//this.newList[index].loadText="没有更多数据";
			}
		}
	}
</script>

<style>
	/* tab bar */
	.uni-tab-bar .list {
		width: 750rpx;
		height: 100%;
	}
</style>
